<template>
  <transition name="detail">
    <div class="wrapper">
      <common-header :title="title"></common-header>
      <div class="content-wrap">
        <div class="content">
          <div class="content-top">
            <div class="title">大微专享券（uhtvH8WE）</div>
            <div class="shop-title">哈根达斯曲江路店</div>
            <div class="desc">大微券:满100减30</div>
            <div class="address">商家地址：某某区魏家凉皮(和平大道中段)某某区某...</div>
            <common-location :title="''"
                             class="location"></common-location>
          </div>
          <div class="content-middle">
            <div></div>
          </div>
          <div class="contnet-bottom"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommonLocation from 'common/location/Location'
export default {
  name: 'DiscountDetail',
  components: {
    CommonHeader,
    CommonLocation
  },
  data () {
    return {
      title: '优惠卷'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $bgcWh
  z-index 10

.detail-enter-active, .detail-leave-active
  transition all 0.3s

.detail-enter, .detail-leave-active
  transform translate3d(100%, 0, 0)

.content-wrap
  initPosition()
  top 106px
  background-color $bgc
  padding()
  padding-top 20px

  .content
    background-color $bgcWh
    padding-top 16px
    padding-bottom 16px
    padding-left 30px
    padding-right 30px
    border-radius 10px

    .content-top
      border-bottom 5px dashed #C9C3C9
      padding-bottom 32px
      box-sizing border-box
      position relative
      margin-bottom 43px

      &::before
        position absolute
        content ''
        bottom -14px
        left -30px
        width 14px
        height 28px
        border-radius 0 28px 28px 0
        background-color $bgc

      &::after
        position absolute
        content ''
        bottom -14px
        right -30px
        width 14px
        height 28px
        border-radius 28px 0 0 28px
        background-color $bgc

      .title
        font-size $fzThird
        font-weight 700
        line-height 61px
        color $fzColor

      .shop-title
        font-size $fzFifth
        line-height 57px
        font-weight 700
        color $fzColor

      .desc
        line-height 52px
        font-size $smallFz
        color $graySecond

      .address
        line-height 52px
        max-width 562px
        font-size $smallFz
        color $graySecond
        ellipsis()

      .location
        right 0
        top 170px
</style>
